/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="distribution__wrap">
        <p class="distribution__title">资源分配情况</p>
        <div class="distribution__item-wrap">
            <div v-for="(item, index) in data" :key="index" class="distribution__item">
                <span class="distribution__item-title">{{ item.title }}</span>
                <div class="distribution__progress-wrap">
                    <div class="distribution__progress-desc">
                        <span>已分配{{ item.allocated }}/{{ item.total }}{{ item.unit }}（{{ item.allocatedPercent }}%）</span>
                        <span>剩余{{ item.noAllocated }}{{ item.unit }}</span>
                    </div>
                    <sf-progress-bar class="distribution__progress"
                                     :value="(item.allocated/item.total)"
                                     :front-color="item.color"
                                     back-color="#EDEFF2"
                                     :text-hidden="true"
                                     border-radius="10"></sf-progress-bar>
                </div>
            </div>
            <empty-panel v-if="!data.length"
                         :title="_('暂无数据')" />
        </div>
    </div>
</template>

<style lang="less" scoped>
    .distribution__wrap {
        width: 32%;
        height: 330px;
        background: #FFF;
        padding: 15px 30px 30px;
        border-radius: 6px;
    }
    .distribution__title {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 30px;
    }
    .distribution__item-wrap {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: calc(100% - 50px);
    }
    .distribution__item {
        display: flex;
        align-items: center;
    }
    .distribution__item-title {
        width: 80px;
        display: inline-block;
    }
    .distribution__progress-wrap {
        width: 100%;
    }
    .distribution__progress-desc {
        color: #80848f;
        display: flex;
        justify-content: space-between;
    }
    .distribution__progress {
        width: 100%;
        /deep/ .sfv-progress-bar_inner {
            width: 100% !important;
            .sfv-progress-bar_bg {
                border: none;
            }
        }
        /deep/ .sfv-progress-bar_text--right {
            display: none;
        }
    }
</style>

<script>
    import EmptyPanel from 'src/components/empty_panel.vue';
    export default {
        components: {
            EmptyPanel
        },

        props: {
            data: {
                type: Array,
                default: () => []
            }
        }
    };
</script>
